/*
  学习目标：React评论列表-练习
*/
import React from 'react';
import ReactDOM from 'react-dom';
// 3. 外部样式处理
import './base.css';

const list = [
  { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  { id: 3, name: '毛不易', content: '像我这样优秀的人' },
];

const divNode = (
  <div>
    {/* 4. 三元控制条件渲染 */}
    {list.length ? (
      <ul>
        {/* 1. 列表渲染, 记得加key */}
        {list.map((item) => {
          return (
            <li className="item" key={item.id}>
              {/* 2. 插值显示内容 */}
              <h3 className="title">{item.name}</h3>
              <p className="content">{item.content}</p>
            </li>
          );
        })}
      </ul>
    ) : (
      <div>暂无数据</div>
    )}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
